<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>温度监控</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../layui/css/layui.css">

		<style>
			body {
				background-color: white;
				overflow: hidden;
				overflow-y: scroll;

			}

			body::-webkit-scrollbar {
				display: none;
			}
		</style>
	</head>

	<body><br />
		<div class="layui-container" id="app">
				<form class="layui-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<span>请选择车牌号</span>
						</div>
						<div class="layui-inline" style="width:150px;">
							<select name="taskid" id="taskid" lay-filter="taskid"></select>
						</div>
					</div>
					<div id="main" style="width:800px;height:400px;"></div>
				</form>
			</div>
		</body>
		<script src="../../js/echarts.common.min.js"></script>
		<script src="../../jss/jquery.js"></script>
		<script src="../../jss/vue.js"></script>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		<script src="../../js/application.js"></script>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					speed: [],
					date: []
				},
				created: function() {
				}
			})
		layui.use(['element','layer', 'carousel', 'table','jquery','form'], function(){
			var element = layui.element;
			var carousel = layui.carousel;
			var table = layui.table;
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			
			
			$(document).ready(function() {
				createdChart();
				gettask();
				getdata();
			})
			
			function gettask() {
				$.ajax({
					type: "post",
					url: urlapi + "chart/getcarlist",
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					dataType: "json",
					data:{
						status:'已完成'
					},
					async: false,
					success: function(succ) {
						if (succ.code == 0) {
							//vue.tasklist = succ.data
							var obj=document.getElementById('taskid')
							for(var i=0;i<succ.data.length;i++){
								obj.options.add(new Option(succ.data[i].carid,succ.data[i].taskid));
							}
							obj.options[0].selected=1;
							form.render('select')
						} else {
							layer.msg(succ.msg, {
								icon: 5
							});
						}
					},
					error: function() {
						layer.msg('请求失败，稍后再试', {
							icon: 5
						});
					}
				});
			}
			
			form.on('select(taskid)', function(data){
				getdata();
			})
		
			function getdata() {
				var taskid = $("#taskid").val();
				$.ajax({
					type: "post",
					url: urlapi + "chart/gettemp",
					data: {
						taskid: taskid
					},
					xhrFields: {
					   withCredentials: true
					},
					crossDomain: true,
					dataType: "json",
					async:false,
					success: function(succ) {
						if (succ.code == 0) {
							var datelist = [];
							var speedlist = [];
							for (var i = 0; i < succ.data.length; i++) {
								datelist.push(succ.data[i].temptime);
								speedlist.push(succ.data[i].temp);
							}
							vue.date = datelist;
							vue.speed = speedlist;
							createdChart();
						} else {
							layer.msg(succ.msg, {
								icon: 5
							});
							var myChart = echarts.init(document.getElementById('main'));
							myChart.setOption({//更新xAxis和series的数据
								xAxis: [{
									data: []
								}],
								yAxis:{},
								series: [{
									name: '温度',
									type: 'line',
									stack: '总量',
									areaStyle: {
										normal: {}
									},
									data: []
								}]
							});
						}
					},
					error: function() {
						layer.msg('请求失败，稍后再试', {
							icon: 5
						});
					}
				});
			}
		
			function createdChart() {
				var myChart = echarts.init(document.getElementById('main'));
				myChart.clear();
				myChart.setOption({
					title: {
						text: '温度折线图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: { /* 分组类型 */
						data: ['温度']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						position: 'bottom',
						type: 'category',
						boundaryGap: false,
						id: [],
						data: vue.date
					}],
					yAxis: {},
					series: [{
						name: '车速',
						type: 'line',
						stack: '总量',
						areaStyle: {
							normal: {}
						},
						data: vue.speed
					}]
				});
			}
		});
	</script>
</html>
